import React from 'react'
import styles from './css/prefecture-item/prefecture-item.module.scss'
import { useDispatch } from 'react-redux';
import { addToCart } from "../stores/cartSlice";

export default function PrefectureItem({ cake }) {
  const dispatch = useDispatch();
  return (
    <li className={styles.li}>
      <a href="#"><img src={"//oss.51cocoa.com/" + cake?.imageUrl} alt="" /></a>
      <a href="#">
        <h6>{cake?.name}</h6>
      </a>
      <a href="#">
        <p className={styles["text_elli_one"]}>{cake?.description}</p>
      </a>
      <div className={styles["tag-list"]}>
        {cake?.tags.map(tag => (
          <a href="#" key={tag.id}>{tag?.content + '>'}</a>
        ))}

      </div>
      <div className={styles["cart-info"]}>
        <span className={styles["spec"]}>{
          `￥${cake?.default?.price}/${cake?.default?.weight}g(${cake?.default?.spec})`}</span>
        <div href="#" className={styles["add-cart"]} onClick={() => dispatch(addToCart({ id: cake.id }))}>加入购物车</div>
      </div>
    </li>
  )
}
